import { defineStore } from "pinia";
import { ref } from "vue";
import { fetchTodoList, fetchAddTodo, fetchRemoveTodo } from "../api";
import { createTodoItem } from "./todoItem";

export interface TodoItem {
    id: number;
    title: string;
}


export const useTodoStore = defineStore("todo",() => {
    let todos = ref<TodoItem[]>([])

    const addTodo = async (title: string) => {
        if(!title) return
        const { data, state } = await fetchAddTodo(title)
        const todo = createTodoItem(data.todo.id, data.todo.title);
        if (state) {
            todos.value.push(todo);
        }
        return todo;
    }

    const removeTodo = async (id:number) => {
        const { data, state } = await fetchRemoveTodo(id);
        if (state === 0) {
            throw new Error(`id:${id} does not exist`);
        }
        const todoItem = findTodo(data.id);
        if (state) {
            if (todoItem) {
                todos.value = todos.value.filter((todoItem) => {
                    return todoItem.id !== id;
                });
            }
        }
        return todoItem;
    }

    const updateTodoList = async ()=>  {
        const { data } = await fetchTodoList();
        todos.value = data.todoList;
    }

    const findTodo =(id:number) => {
        return todos.value.find((todoItem) => {
            return todoItem.id === id
        })
    }

    return {
        todos,
        findTodo,
        removeTodo,
        addTodo,
        updateTodoList
    }
})